<template>
  <a-card :style="{ boxShadow: 'none' }" :bordered="false" :bodyStyle="{ padding: '0' }">
    <a-table
      @change="pageChange"
      table-layout="fixed"
      sticky
      :row-selection="{
        selectedRowKeys: dataTable.keys,
        onChange: (k: any[]) => (dataTable.keys = k),
      }"
      bordered
      :loading="dataTable.loading"
      :pagination="false"
      :customRow="customRow"
      :rowKey="dataTable.rowKey"
      :columns="formatColumns(dataColumns)"
      :data-source="dataTable.data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-dropdown-button
            trigger="click"
            @click="dataEdit(record.dictCode)"
            @open-change="openChange(record as SystemDictData)"
          >
            <EditOutlined />
            <template #overlay>
              <a-menu>
                <div v-perm="'system:data:export'">
                  <a-menu-item @click="dataDelete(record.dictCode)">
                    <template #icon>
                      <DeleteOutlined />
                    </template>
                    删除
                  </a-menu-item>
                </div>
              </a-menu>
            </template>
          </a-dropdown-button>
        </template>
        <template v-else-if="column.key === 'isDefault'">
          <a-switch
            :checked-value="'Y'"
            :un-checked-value="'N'"
            :options="isOptions"
            disabled
            v-model:checked="record.isDefault"
          ></a-switch>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
import { isOptions } from '@/global/options/system';
import { formatColumns } from '@/utils/table/table';
import { useArrayFilter, useCloned } from '@vueuse/core';
import type { TablePaginationConfig } from 'ant-design-vue';
import type { FilterValue, SorterResult } from 'ant-design-vue/es/table/interface';
import { dataColumns } from '../../data/column';
import { dataDelete, dataEdit } from '../../data/curd';
import { dataForm } from '../../data/form';
import { dataTable } from '../../data/table';

const openChange = (record: SystemDictData) => {
  dataForm.value = useCloned(record).cloned.value;
};

/* 行事件 */
const customRow = (record: SystemDictData) => {
  return {
    onClick() {
      const id = (record as any)[dataTable.value.rowKey];
      dataForm.value = record;
      if (!dataTable.value.keys.includes(id)) {
        dataTable.value.keys.push(id);
      } else {
        dataTable.value.keys = useArrayFilter(dataTable.value.keys, e => e !== id).value;
      }
      dataTable.value.keys = [record.dictCode!];
    },
    onDblclick() {
      dataEdit(record.dictCode);
    },
  };
};

/* 分页事件触发 */
const pageChange = (
  pagination: TablePaginationConfig,
  filters: Record<string, FilterValue>,
  sorter: SorterResult<SystemDictData> | SorterResult<SystemDictData>[],
) => {
  dataTable.value.query.pageNum = pagination.current!;
  dataTable.value.query.pageSize = pagination.pageSize!;
};
</script>

<style lang="scss" scoped></style>
